Xamarin.iOS コントロールの配置

1 はじめに

Xamarin.iOSで、「ボタン」や「ラベルコントロール」をビューの上に配置するには、「コードによる方法」と「ストーリーボードによる方法」の２種類があります。

今回は、ボタンの配置と、それを押したときのイベント（アラート表示）を例にとって、この２つを紹介します。

次の図は、今回サンプルとするプログラムの実行画面です。

2 コードによる方法

ビューコントローラー ( RootViewController ) の ViewDidLoad() は、アプリがインスタンス化された直後（初回に一回だけ）実行されるメソッドです。 通常、画面構成（コントロールの配置）などはここに記述されることになります。

下記のコードは、ボタンを配置して、そのイベント処理を記述したものです。

public partial class RootViewController : UIViewController{

    //・・・略・・・

    public override void ViewDidLoad() {
        base.ViewDidLoad();

        //ボタンの生成
        var button = new UIButton(UIButtonType.RoundedRect) {
            Bounds = new RectangleF(0, 0, 200, 30),//ボタンのサイズ
            Center = new PointF((float)View.Bounds.Width / 2, (float)View.Bounds.Height / 2), //ボタンのセンターを画面中央にする
        };
        button.SetTitle("OK", UIControlState.Normal);//ボタンのタイトル
        button.TouchUpInside += (sender, args) => {//ボタンを押した際のイベント処理
            var alert = new UIAlertView("タイトル", "メッセージ", null, "Cancel", "OK");
            alert.Show();//アラート表示
        };
        View.AddSubview(button);//ビューへの追加(ここでのViewは、ビューコントローラの上に配置されたUIViewの事です)
    }

    //・・・略・・・
}

3 ストーリーボードによる方法

ストーリーボードを使用して、先のものと同じ動作をするようにしてみます。

(1) コントロールの配置

「ソリューションエクスプロラー」で「MainStoryboard.storyboard」をダブルクリックし「ストーリーボード」を表示します。

続いて、「ツールボックス」から「Button」をドラッグアンドドロップして配置します。

(2) 表示文字を設定

今、配置したボタンコントロールを選択した状態で、プロパティで「Widget」のタブを表示し、「Title」のところに表示名を入力します。 ここでは、デフォルトで「button」となっているところを「OK」に書き換えました。自動的にビューの方も「OK」に変化しています。

(3) 名前を付ける

同じくプロパティの「Widget」で、「Identity」「Name」のところに名前を入力します。（ここでは名前を「button」としました）

名前入力が完了すると、自動的にRootViewController.designer.csにOutlet属性のついたプロパティが定義されます。（＊.designer.csは、VisualStudioが自動的に編集するコードで、ユーザは変更できません）

定義されたプロパティは、インテリセンスに現れ、そのまま利用可能です。

念のため、「ドキュメントアウトライン」で確認すると、Viewの階層下にButton(button)が配置されている様子を確認することができます。

(4) イベント処理

ボタンコントロールを選択した状態で、プロパティで「Events」のタブを表示し、処理したいイベント（ここでは、Up Inside）にイベント名（ここでは、TouchUpInsideとした)を入力し「Add」ボタンを押します。

ここでも、自動的にRootViewController.designer.csにAction属性のついたイベントが定義されます。

実際のイベント処理は、RootViewController.cs側に、自分で実装することになります。 インテリセンスを使用して、イベント名から引くと簡単に記述することができるでしょう。

4 まとめ

ストーリーボードとコードの連携は、designer.cs（自動生成コード）と partial class によって非常にうまく実装されており、本家のXcodeより簡単になってしまったかも知れません。

Xamarinもバージョン２ぐらいまでは、ストーリーボードがXamarin側で操作できなかったで、Xcodeと行ったり来たりで大変だったのですが、現在ではかなりスムーズに動作していると思います。

5 参考リンク

Xamarin Developer Hello, iOS

この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015

Xamarin記事一覧（SAPPOROWORKSの覚書）